<template>
  <div class="common-details">
    <customDetailsTopbar flag :title="title" show-right-icon @back="back" />
    <div class="infoWarp listInner" :style="{ paddingBottom: active === '排查任务管理' ? '0' : '' }">
      <component :is="currentComponent" :params="dParams" @changeTitle="changeTitle" />
    </div>
  </div>
</template>
<script>
import safetyDetails from './components/safety/details.vue'
import environmentDetails from './components/environment/details.vue'
import fireFightingDetails from './components/fireFighting/details.vue'
import energySourcesDetails from './components/energySources/details.vue'
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'

export default {
  components: {
    CustomDetailsTopbar,
    safetyDetails,
    environmentDetails,
    fireFightingDetails,
    energySourcesDetails
  },
  data() {
    return {
      currentComponent: '',
      dParams: {
      },
      list: [
        {
          key: '安全生产',
          value: 'safetyDetails'
        },
        {
          key: '环保管理',
          value: 'environmentDetails'
        },
        {
          key: '消防管理',
          value: 'fireFightingDetails'
        },
        {
          key: '能源管理',
          value: 'energySourcesDetails'
        }
      ],
      current: '',
      active: '',
      title: ''
    }
  },
  watch: {
  },
  created() {
    const { page, taskId, active, current, dangersLedgerId } = this.$route.query
    if (page === 'OA' && taskId) {
      this.current = current || ''
      this.active = active || ''
      this.dParams.dangersLedgerId = taskId
      this.dParams.active = active
    } else {
      this.current = current || ''
      this.active = active || ''
      this.dParams.dangersLedgerId = dangersLedgerId
      this.dParams.active = active
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.list = this.list.filter((v) => {
        return v.key.indexOf(this.current) > -1
      })
      this.currentComponent = this.list[0]?.value
    })
  },
  methods: {
    changeTitle(data) {
      // auditResult审核状态 checkState隐患状态
      const { active } = this.$route.query
      if (active === '隐患台账') {
        this.title = '隐患详情' + (data.checkState ? ('-' + data.checkState) : '')
      }
      if (active === '专家排查隐患审核') {
        this.title = '隐患详情' + (data.auditResult ? ('-' + data.auditResult) : '')
      }
      if (active === '排查任务管理') {
        this.title = '任务详情'
      }
    },
    back() {
      this.$router.replace({
        path: '/staging/dangerTreatment',
        query: this.$route.query
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.infoWarp {
  position: absolute;
  top: 90px;
  right: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  padding-bottom: 120px;
}

.iconfont.active{
  color: blue;
}
</style>
